let header = `<header>
			<!-- 1.1 快捷导航栏 -->
			<div class="shortcut">
				<div class="shortcut-content center">
					<div class="welcome fl">
						品优购欢迎你！请 
						<a href="./login.html">登录</a>
						<a href="./register.html">免费注册</a>
					</div>
					<ul class="order-center fr">
						<li><a href="./order.html">我的订单</a><span>|</span></li>
						<li><a href="./personal.html">个人中心</a></li>
					</ul>
				</div>
			</div>
			
			<!--1.2 logo -->
			<div class="logo-area center">
				<h1>
					<a href="index.html">
						<img src="img/logo.png" alt="logo">
					</a>
				</h1>
				<div class="search fl">
					<input type="text" placeholder="请搜索内容..." />
					<input type="button" name="" id="" value="搜索" />
				</div>
				<a href="cart.html">
				<div class="card">
					<i class="iconfont icon-cart_light"></i>
					<span class="text">我的购物车</span>
					<span class="badge">0</span>
					<i class="iconfont icon-xiangyoujiantou"></i>
				</div>
				</a>
			</div>
			<div class="clear"></div>
			
			<!--1.3 导航栏 -->
			<nav>
				<div class="nav center">
					<div class="category fl">
						<div class="category-title">全部商品分类</div>
						<ul class="category-nav-list">
							<li class="category-nav-item">
								<div class="category-name">
									<a href="category.html">手机</a>
									<i class="iconfont icon-xiangyoujiantou"></i>
								</div>
								<ul class="category-subnav-list">
									<li>
										<a href="pro-cate.html">
											<img src="img/category/phone/1.png" alt="">
											<span>HUAWEI P系列</span>
										</a>
									</li>
									<li>
										<a href="pro-cate.html">
											<img src="img/category/phone/2.png" alt="">
											<span>HUAWEI Mate系列</span>
										</a>
									</li>
									<li>
										<a href="pro-cate.html">
											<img src="img/category/phone/3.png" alt="">
											<span>HUAWEI Nova系列</span>
										</a>
									</li>
								</ul>
							</li>
							<li class="category-nav-item">
								<div class="category-name">
									<a href="category.html">笔记本</a>
									<i class="iconfont icon-xiangyoujiantou"></i>
								</div>
								<ul class="category-subnav-list">
									<li>
										<a href="pro-cate.html">
											<img src="img/category/bijiben/1.png" alt="">
											<span>华为MateBook X系列</span>
										</a>
									</li>
									<li>
										<a href="pro-cate.html">
											<img src="img/category/bijiben/2.png" alt="">
											<span>华为MateBook系列</span>
										</a>
									</li>
									<li>
										<a href="pro-cate.html">
											<img src="img/category/bijiben/3.png" alt="">
											<span>华为MateBookD系列</span>
										</a>
									</li>
								</ul>
							</li>
							<li class="category-nav-item">
								<div class="category-name">
									<a href="category.html">平板</a>
									<i class="iconfont icon-xiangyoujiantou"></i>
								</div>
								<ul class="category-subnav-list">
									<li>
										<a href="pro-cate.html">
											<img src="img/category/pingban/1.png" alt="">
											<span>华为MatePad系列</span>
										</a>
									</li>
									<li>
										<a href="pro-cate.html">
											<img src="img/category/pingban/2.png" alt="">
											<span>华为畅想系列</span>
										</a>
									</li>
								</ul>
							</li>
							<li class="category-nav-item">
								<div class="category-name">
									<a href="category.html">智能穿戴</a>
									<i class="iconfont icon-xiangyoujiantou"></i>
								</div>
								<ul class="category-subnav-list">
									<li>
										<a href="pro-cate.html">
											<img src="img/category/wear/1.png" alt="">
											<span>智能手表</span>
										</a>
									</li>
									<li>
										<a href="pro-cate.html">
											<img src="img/category/wear/2.png" alt="">
											<span>智能手环</span>
										</a>
									</li>
								</ul>
							</li>
							<li class="category-nav-item">
								<div class="category-name">
									<a href="category.html">智能家具</a>
									<i class="iconfont icon-xiangyoujiantou"></i>
								</div>
								<ul class="category-subnav-list">
									<li>
										<a href="pro-cate.html">
											<img src="img/category/jiaju/1.png" alt="">
											<span>智能路由</span>
										</a>
									</li>
									<li>
										<a href="pro-cate.html">
											<img src="img/category/jiaju/2.png" alt="">
											<span>智能音响</span>
										</a>
									</li>
								</ul>
							</li>
							<li class="category-nav-item">
								<div class="category-name">
									<a href="category.html">电视</a>
									<i class="iconfont icon-xiangyoujiantou"></i>
								</div>
								<ul class="category-subnav-list">
									<li>
										<a href="pro-cate.html">
											<img src="img/category/tv/1.png" alt="">
											<span>华为智慧屏</span>
										</a>
									</li>
									<li>
										<a href="pro-cate.html">
											<img src="img/category/tv/2.png" alt="">
											<span>荣耀智慧屏</span>
										</a>
									</li>
								</ul>
							</li>
						
						</ul>
					</div>
					<ul class="main-nav fl">
						<li><a href="category.html">手机</a></li>
						<li><a href="category.html">笔记本</a></li>
						<li><a href="category.html">平板</a></li>
					</ul>
				</div>
			</nav>
		</header>`;

document.write(header); //将header变量中的内容输出到文档中
